<!--慢SQL日志-->
<template>
  <DataTable url="overtimesql/list" pageable>
    <template #default="table">
      <Table :datas="table.data" :loading="table.loading" >
        <TableItem title="序号" prop="$serial" :width="50"></TableItem>
        <TableItem title="SQL" prop="sql"></TableItem>
        <TableItem title="执行时间" prop="logTime" :format="formatDate" :width="180"></TableItem>
        <TableItem title="执行时长" prop="takeTime" unit="ms" :width="110"></TableItem>
        <TableItem  title="详细" :width="80">
          <template #default="{data}">
            <LinkButtons>
              <span class="text-hover" @click="showData(data)">详情</span>
            </LinkButtons>
          </template>
        </TableItem>
      </Table>
    </template>
  </DataTable>
  <Modal v-model="showDetail">
    <Form readonly class="title-suffix">
      <FormItem label="位置">{{data.codeTrace}}</FormItem>
      <FormItem label="SQL">{{data.sql}}</FormItem>
      <FormItem label="执行时间">{{formatDate(data.logTime)}}</FormItem>
      <FormItem label="执行时长">{{data.takeTime}}ms</FormItem>
    </Form>
  </Modal>
</template>
<script setup>
import {ajax, util} from 'framework'

import {ref, reactive, onMounted} from 'vue'

 const formatDate=util.format("yyyy-MM-dd HH:mm:ss")
// let table = ajax.createDs('overtimesql/list', true)
// table.load()

const selects = ref([]),showDetail=ref(false),data=ref({codeTrace:''})



function showData(_data){
  data.value=_data
  showDetail.value=true
}

</script>
